<template>
  <div class="list container">
	<header v-if='isShow'>
		<div class='header-s' @click='$router.back()'>
			<i class='iconfont icon-fanhui'></i>
		</div>
		<div class='header-search' @click='goSearch'>
			<i class='iconfont icon-fangdajing'></i>
			<span>搜您喜欢的...</span>
		</div>
		<div class='header-s'>
			<i class='iconfont icon-kefu'></i>
		</div>
	</header>
	<section>
		<div class='list-l'>
			<ul class='l-item'>
				<li
                    v-for='(item,index) in lData'
                    :key='index'
                    :class='index==currentIndex ?  "active" : ""'
                    @click='goScroll(index)'
                >{{item}}</li>
			</ul>
		</div>
		<div class='list-r' ref='listR'>
			<div>
                <ul
                    v-for='(item,index) in rData'
                    :key='index'
                    ref='uls'
                    class='r-item'
                >
                	<li
                        v-for='(k,i) in item'
                        :key='i'
                    ><!--二级-->
                		<div class='r-title'>
                			<i> - </i>
                			<span>{{k.name}}</span>
                			<i> - </i>
                		</div>
                		<ul class='r-content'><!--三级-->
                			<li
                                v-for='(j,idx) in k.data'
                                :key='idx'
                            >
                				<img :src="j.imgUrl" alt="">
                				<span>{{j.name}}</span>
                			</li>
                		</ul>
                	</li>
                </ul>
            </div>
		</div>
	</section>
	<Tabbar></Tabbar>
  </div>
</template>
<script>
import Tabbar from '@/components/common/Tabbar.vue'
import BetterScroll from 'better-scroll'
import http from '@/common/api/request.js'
export default{
    data () {
        return {
            isShow:true,
            lData:[],
            rData:[],
            BetterScroll:'',
            allHeight:[],//右侧，所有高度
            scrollY:0,//滚动的距离
        }
    },
	components:{
		Tabbar
	},
    computed:{
        currentIndex(){
            return this.allHeight.findIndex((item,index)=>{
                return this.scrollY >= item && this.scrollY < this.allHeight[index+1];
            })
        }
    },
    async created(){
        let res = await http.$axios(  {
        	url:'/api/list'
        })
   
        res.forEach(v=>{
            this.lData.push( v.name );
            this.rData.push( v.data );
        })
        
        this.$nextTick(()=>{
            
            this.BetterScroll =new BetterScroll(this.$refs.listR, {
              movable: true,
              zoom: true,
              click:true,
              probeType:3
            })
            
            let height = 0;
            this.allHeight.push(0)
            let uls = this.$refs.uls;
            uls.forEach(v=>{
                height += v.clientHeight;
                this.allHeight.push(height);
            })
            
            //滚动距离
            this.BetterScroll.on('scroll',(pos)=>{
                this.scrollY = Math.abs( pos.y );
                                 
                if( pos.y >= 0 ){
                    this.isShow = true;
                }else{
                    this.isShow = false;
                }
            })
        })
    },
    methods:{
        goScroll( index ){
            //参数1:是x 偏移量
            //参数2:是y 偏移量
            this.BetterScroll.scrollTo(0,-this.allHeight[index],500);
        },
        goSearch(){
            this.$router.push('/search')
        }
    }
}
</script>

<style scoped lang='scss'>
header{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 1.173333rem;
	background-color: #b0352f;
	.header-search{
		display: flex;
		align-items: center;
		flex:1;
		padding:0.186666rem 0.08rem;
		background-color: #ffffff;
		border-radius: 12px;
		i{
			color:#999999;
			font-size:0.426666rem;
		}
		span{
			color:#999999;
			font-size:0.426666rem;
		}
	}
	.header-s{
		padding:0 0.2rem;
		i{
			color:#FFFFFF;
			font-size:0.64rem;
		}
	}
}
section{
	display: flex;
}
.list-l{
	width: 2.48rem;
	height: 100%;
	border-right: 2px solid #ccc;
	overflow: hidden;
	.l-item{
		display: flex;
		flex-direction: column;
		li{
			position: relative;
			width: 100%;
			line-height: 0.4rem;
			padding:0.266666rem 0;
			font-size:0.373333rem;
			text-align: center;
			&.active{
				color:red;
				font-size:0.426666rem;
			}
			&.active::before{
				content: '';
				position: absolute;
				left:0;
				top:50%;
				height: 0.8rem;
				width: 0.08rem;
				margin-top:-0.4rem;
				background-color: red;
			}
		}
	}
  
}
.list-r{
	flex:1;
	.r-title{
		padding:0.4rem 0;
		font-size:0.586666rem;
		text-align: center;
	}
	.r-content{
		display: flex;
		flex-wrap: wrap;
		li{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 33.333333%;
			img{
				width: 1.413333rem;
				height:1.413333rem;
			}
			span{
				font-size:0.426666rem;
			}
            
		}
	}
    .r-item{
        &:last-child{
            padding-bottom:8rem;
        }
    }
}
.tabbar{
	border-top: 2px solid #ccc;
}
</style>

